<template>
	<view class="circle-content">
		<!-- 顶部 -->
		<view class="like-circle">
			<view class="like-title">我关注的频道</view>
			<view class="like-conts">
				<view class="conts-top">
					<view class="like-column" v-for="item in myCircle.data" :key="item.id" @click="toCircleDetail(item.id)">
						<image :src="item.image" mode="aspectFit"></image>
						<view class="like-detail">
							<view class="detail-title">{{ item.title }}</view>
							<view class="detailhot">热度:&nbsp;&nbsp;{{ item.heat }}</view>
						</view>
					</view>
					<view class="like-column" style="align-items: center;" @click="toMyCircle" v-if="more">
						<view class="more" style="background-color:linear-gradient(rgba(47,119,241,0.5),rgba(47,119,241,0.1));">
							<image src="/static/forum/more.png" mode="heightFix" style="width: 50%;height: 50%;border-radius: 0;"></image>
						</view>
						<!-- <view style="font-size: 28rpx;">更多</view> -->
						<view class="like-detail">
							<view class="detail-title">更多</view>
							<view class="detailhot">查看我的频道</view>
						</view>
					</view>
					<view class="like-column" @click="createCircle">
						<image src="/static/forum/found.png" mode="aspectFit"></image>
						<view class="like-detail">
							<view class="detail-title">创建频道</view>
							<view class="detailhot">创建自己的频道</view>
						</view>
					</view>
				</view>
				<!-- <view class="conts-bottom">
				</view> -->
			</view>
		</view>

		<!-- 频道分类 -->
		<view class="circle-sort">
			<view class="type-title">频道分类</view>
			<scroll-view scroll-x="true" class="menu-nav">
				<view class="type-column" v-for="item in type_data" :key="item.id" @click="toDetail(item.id, item.name)">
					<!-- <image :src="adminImgPath + item.image" mode="aspecFit"></image> -->
					<image :src="item.image" mode="aspecFit"></image>
					<view class="mark">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 频道列表 -->
		<view class="circle-list">
			<view class="list-title">频道列表</view>
			<view class="list-cont">
				<circleList :type="type" :circleList="circleList" @attention="attention" @cancleSub="cancleSub"></circleList>
				<view class="" style="margin-top: 10rpx;color: #656565;font-size: 26rpx;text-align: center;" v-if="circleList.length != 0 && !hasMore">没有更多了~</view>
			</view>
		</view>

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue'
import circleList from '@/pages/Component/forum/component/circle/circle-list.vue'
import ikz from '@/pages/Common/tools.js'
import Vue from 'vue'
var app = getApp()
export default {
	components: {
		ikzTabbar,
		circleList,
	},
	data() {
		return {
			adminImgPath: app.globalData.adminImgPath,
			adminPath: app.globalData.adminPath,
			type: 'circle',
			type_data: [],
			tabbar_Data: {
				type: 1,
				list: [
					{
						title: '首页',
						url: '/pages/Component/forum/Program/index/index',
						iconPath: '/static/forum/tabbar/index.png',
						selectedIconPath: '/static/forum/tabbar/index-check.png',
						status: 1,
					},
					{
						title: '频道',
						url: '/pages/Component/forum/Program/circle/circle',
						iconPath: '/static/forum/tabbar/circle.png',
						selectedIconPath: '/static/forum/tabbar/circle-check.png',
						status: 1,
					},
					{
						title: '发布',
						url: '/pages/Component/forum/Program/release/release',
						iconPath: '/static/forum/tabbar/release.png',
						selectedIconPath: '/static/forum/tabbar/release-check.png',
						status: 1,
					},
					{
						title: '我的',
						url: '/pages/Component/forum/Program/personal/personal',
						iconPath: '/static/forum/tabbar/mine.png',
						selectedIconPath: '/static/forum/tabbar/mine-check.png',
						status: 1,
					},
				],
			},

			myCircle: [], //我的频道
			circleList: [], //频道列表
			more: false, //是否显示更多

			page: 1,
			limit: 5,
			hasMore: false,
		}
	},
	onLoad() {
		this.getCircleCategory()
		this.getCircleList()
		uni.hideHomeButton()
	},
	onShow() {
		this.getMyCircle()
	},
	onPullDownRefresh() {
		this.page = 1
		this.getMyCircle()
		this.getCircleList()
	},
	onReachBottom() {
		if (this.hasMore) {
			this.page++
			this.getCircleList()
		}
	},
	methods: {
		// 跳转频道详情
		toCircleDetail(id) {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/circle-detail/circle-detail?id=' + id,
			})
		},
		// 去频道分类详情
		toDetail(id, name) {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/circle-list?id=' + id + '&name=' + name,
			})
		},
		// 跳转我的频道
		toMyCircle() {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/personal/nav-menu/mycircle',
			})
		},
		// 创建频道
		createCircle() {
			uni.navigateTo({
				url: '/pages/Component/forum/Program/circle/create-circle',
			})
		},

		// 获取我关注的频道
		getMyCircle() {
			let path = '/xyb/posts/posts_circle/circle_follow'
			let data = {
				token: uni.getStorageSync('local_user_session'),
			}
			ikz.requestPost(path, data, res => {
				// console.log('获取我关注的频道', res.data.data);
				if (res.statusCode == 200) {
					this.myCircle = res.data.data
					if (this.myCircle.count > 6) {
						this.myCircle.data = this.myCircle.data.slice(0, 6)
						this.more = true
					}
					// console.log(this.myCircle);
				}
			})
		},
		// 获取频道分类
		getCircleCategory() {
			let path = '/xyb/posts/posts_circle/category'
			let data = {}
			ikz.requestPost(path, data, res => {
				// console.log('获取频道分类', res)
				if (res.statusCode == 200) {
					this.type_data = res.data.data
				}
			})
		},
		// 获取频道列表
		getCircleList() {
			let path = '/xyb/posts/posts_circle/index'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				page: this.page,
				limit: this.limit,
			}
			ikz.requestPost(path, data, res => {
				// console.log(res);
				if (res.statusCode == 200) {
					let circleList = res.data.data.data
					this.circleList = this.page == 1 ? circleList : [...this.circleList, ...circleList],
					this.hasMore = this.page < res.data.data.count / this.limit ? true : false
				}
				uni.stopPullDownRefresh()
			})
		},
		// 关注频道
		attention(id) {
			// console.log(id);
			let path = '/xyb/posts/posts_circle/follow'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: id,
			}
			ikz.requestPost(path, data, res => {
				// console.log('关注频道', res);
				if (res.statusCode == 200) {
					this.getMyCircle()
					this.circleList.forEach(el => {
						if (el.id == id) {
							el.follow_status = 1
						}
					})
					uni.showToast({
						title: '关注成功',
						icon: 'none',
					})
				}
			})
		},
		// 取消关注频道
		cancleSub(id) {
			let path = '/xyb/posts/posts_circle/follow_del'
			let data = {
				token: uni.getStorageSync('local_user_session'),
				circle_id: id,
			}
			ikz.requestPost(path, data, res => {
				// console.log('关注频道', res);
				if (res.statusCode == 200) {
					this.getMyCircle()
					this.circleList.forEach(el => {
						if (el.id == id) {
							el.follow_status = 0
						}
					})
					uni.showToast({
						title: '取消关注成功',
						icon: 'none',
					})
				}
			})
		},
	},
}
</script>
<style lang="scss">
/* 颜色变量 */
$primary-color: #FF5F15;
$secondary-color: #FFF5F0;
$accent-color: #FF8C5A;
$text-color: #333;
$light-text: #666;
$border-radius: 24rpx;
$shadow: 0 8rpx 30rpx rgba(255, 95, 21, 0.1);

page {
  background-color: $secondary-color;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.circle-content {
  padding: 0 20rpx 120rpx;
  
  .like-circle {
    background: white;
    border-radius: $border-radius;
    padding: 30rpx;
    margin: 30rpx 0;
    box-shadow: $shadow;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 8rpx;
      height: 100%;
      background: $primary-color;
    }

    .like-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $primary-color;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      
      &::after {
        content: '';
        flex: 1;
        height: 2rpx;
        background: linear-gradient(to right, $primary-color, transparent);
        margin-left: 20rpx;
      }
    }

    .like-conts {
      .conts-top {
        display: flex;
        flex-wrap: wrap;
        gap: 18rpx;
        justify-content: space-between;

        .like-column {
          width: calc(50% - 10rpx);
          background: $secondary-color;
          border-radius: $border-radius;
          padding: 20rpx;
          display: flex;
          align-items: center;
          transition: all 0.3s ease;
          border: 1rpx solid rgba($primary-color, 0.1);
          
          &:active {
            transform: scale(0.98);
            background: rgba($primary-color, 0.05);
          }

          .more {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba($primary-color, 0.2), rgba($primary-color, 0.1));
            display: flex;
            justify-content: center;
            align-items: center;
            
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }

          image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            object-fit: cover;
            border: 2rpx solid rgba($primary-color, 0.2);
          }

          .like-detail {
            margin-left: 20rpx;
            flex: 1;

            .detail-title {
              font-size: 30rpx;
              font-weight: 500;
              color: $text-color;
              margin-bottom: 10rpx;
            }

            .detailhot {
              font-size: 24rpx;
              color: $accent-color;
              display: flex;
              align-items: center;
              
              &::before {
                content: '🔥';
                margin-right: 6rpx;
              }
            }
          }
        }
      }
    }
  }

  .circle-sort {
    background: white;
    border-radius: $border-radius;
    padding: 30rpx;
    margin: 30rpx 0;
    box-shadow: $shadow;

    .type-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $primary-color;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      
      &::after {
        content: '';
        flex: 1;
        height: 2rpx;
        background: linear-gradient(to right, $primary-color, transparent);
        margin-left: 20rpx;
      }
    }

    .menu-nav {
      white-space: nowrap;
      padding: 10rpx 0;
      
      .type-column {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 160rpx;
        margin-right: 20rpx;
        position: relative;
        
        &:last-child {
          margin-right: 0;
        }

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          object-fit: cover;
          border: 4rpx solid $primary-color;
          box-shadow: 0 4rpx 20rpx rgba($primary-color, 0.2);
        }

        .mark {
          margin-top: 16rpx;
          font-size: 28rpx;
          color: $text-color;
          font-weight: 500;
          text-align: center;
          width: 100%;
        }
      }
    }
  }

  .circle-list {
    background: white;
    border-radius: $border-radius;
    padding: 30rpx;
    margin: 30rpx 0;
    box-shadow: $shadow;

    .list-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $primary-color;
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      
      &::after {
        content: '';
        flex: 1;
        height: 2rpx;
        background: linear-gradient(to right, $primary-color, transparent);
        margin-left: 20rpx;
      }
    }

    .no-more {
      color: $light-text;
      font-size: 26rpx;
      text-align: center;
      margin: 20rpx 0;
      padding: 20rpx 0;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100rpx;
        height: 2rpx;
        background: $primary-color;
      }
    }
  }
}

/* 文本溢出省略号 */
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>